<template>
  <div>
    <el-collapse value="common">
      <el-collapse-item title="公共配置" name="common">
        <div class="pad-lft-rgt-10">
          <div class="flex-com mar-btm">
            <span class="label-title">文字大小</span>
            <el-input-number v-model="widget.UI.data.textSize" placeholder="文字大小" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">图标大小</span>
            <el-input-number v-model="widget.UI.data.iconSize" placeholder="图标大小" size="mini"
                             class="width-100"></el-input-number>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="特殊配置" name="common">
        <div class="pad-lft-rgt-10">
          <div class="flex-com mar-btm">
            <span class="label-title">sip账号</span>
            <el-select v-model="widget.UI.data.useManagerData" placeholder="请选择sip账号" class="width-100" size="mini" >
              <el-option label="集控配置" :value="true"></el-option>
              <el-option label="本地配置" :value="false"></el-option>
            </el-select>
          </div>
          <div v-if="!widget.UI.data.useManagerData">
            <p class="font-color-danger">本地配置</p>
            <div class="flex-com mar-btm">
              <span class="label-title">账号</span>
              <el-input v-model="widget.UI.data.sipData.phoneNumber"  placeholder="请输入账号" size="mini"></el-input>
            </div>
            <div class="flex-com mar-btm">
              <span class="label-title">密码</span>
              <el-input v-model="widget.UI.data.sipData.password"  placeholder="请输入密码" size="mini"></el-input>
            </div>
            <div class="flex-com mar-btm">
              <span class="label-title">服务地址</span>
              <el-input v-model="widget.UI.data.sipData.serviceAddress"  placeholder="请输入服务地址" size="mini"></el-input>
            </div>
            <div class="flex-com mar-btm">
              <span class="label-title">代理地址</span>
              <el-input v-model="widget.UI.data.sipData.tcpAddress"  placeholder="请输入代理地址" size="mini"></el-input>
            </div>
            <div class="flex-com mar-btm">
              <span class="label-title">服务中心号码</span>
              <el-input v-model="widget.UI.data.sipData.callNumber"  placeholder="请输入服务中心号码" size="mini"></el-input>
            </div>
          </div>

        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {SipCall} from "@/modules/IDE/widget/custom/sipCall";

  export default {
    name: 'SipCallSpec',
    props: {
      widget: {
        type: SipCall,
        default: () => {
          return {};
        }
      }
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      }
    }
  };
</script>

<style lang="less" scoped>
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 56px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
